<template>
	<view class="scenicOrder">
		<!-- <Header @back="back" left-icon="back" left-text="" right-text="" title="我的订单"></Header> -->
		<view class="content">
			<view class="order-list">
				<view class="ordder-li" v-for="(item, index) in orderList" :key="index" @click="goDetail(item)">
					<view class="left">
						<image class="img" :src="item.hostImg" mode=""></image>
					</view>
					<view class="fz17 right">
						<view class="name over2 font-weight">{{item.name}}</view>
						<view class="m-color font-weight singalprice">￥{{item.totalPrice}}</view>
						<view class="usestatus">
							<view class="">订单状态:</view>
							<view class="isuse" v-if="item.status == '未使用'">未使用</view>
							<view class="isuse1" v-if="item.status == '已使用'">已使用</view>
							<view class="isuse2" v-if="item.status == '过期'">过期</view>
						</view>
					</view>
				</view>
			</view>
			<view class="fz14 tc h-8 signtips">{{tips}}</view>
		</view>
	</view>
</template>

<script>
	import Header from '@/components/header.vue'
	export default {
		data() {
			return {
				orderList: [],
				page: 1,
				tips: '正在加载...',
				isOnReachBottom: false,
				items: {}
			}
		},
		components: {
			Header
		},
		onLoad: function(option) {
			var that = this;
			if (option.userinfo) {
				let userinfo = JSON.parse(decodeURIComponent(option.userinfo));
				if (userinfo.appid) {
					this.pub.setAppid(userinfo.appid)
				}
				if (userinfo.secret) {
					this.pub.setSecret(userinfo.secret)
				}
				this.pub.getEncryptionOid(userinfo, function(res) {
					if (res) {
						//直接获取列表
						that.page = 1;
						that.getOrderList()
					} else {
						that.tips = "无token信息！！"
					}
				})
			} else {
				this.page = 1;
				this.getOrderList()
			}
		},
		onShow() {
			this.page = 1;
			this.getOrderList()
		},
		onReachBottom: function() {
			this.page++
			if (this.isOnReachBottom) {
				this.getOrderList()
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				});
				// uni.navigateTo({
				// 	url: '/pages/scenicOrder/home',
				// 	animationType: 'pop-in',
				// 	animationDuration: 200
				// });
			},
			getOrderList() {
				let account = this.pub.getAccount();
				if (!account || account == "") {
					return
				}
				uni.showLoading({
					mask: true,
					title: "正在加载..."
				})
				this.$postApi(this.$path.GETSCENICSPOT_ORDERLIST, {
					page: this.page,
					rows: 10,
					unionId: account
				}).then(data => {
					uni.hideLoading()
					console.log(data)
					if (data.data.success) {
						// alert(JSON.stringify(data.data))
						if (data.data.rows.length !== 0) {
							for (let i = 0; i < data.data.rows.length; i++) {
								data.data.rows[i].hostImg = this.pub.fmtImgUrl(data.data.rows[i].hostImg);
							}
							if (this.page == 1) {
								this.orderList = []
							}
							this.tips = ''
							this.isOnReachBottom = true
							this.orderList = this.orderList.concat(data.data.rows)
						} else {
							this.tips = '没有更多数据了'
							this.isOnReachBottom = false
						}
					}
				})
			},
			goDetail(item) {
				uni.navigateTo({
					url: '/pages/scenicOrder/scenicDetail?item=' + encodeURIComponent(JSON.stringify(item)),
					animationType: 'pop-in',
					animationDuration: 200
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scenicOrder {
		.order-list {
			.ordder-li {
				padding: 36upx 40upx;
				border-bottom: 1upx solid #F2F2F2;
				display: flex;

				.left {
					width: 252upx;
					height: 252upx;
					margin-right: 27upx;

					.img {
						width: 100%;
						height: 100%;
						border-radius: 6upx;
					}
				}

				.right {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 26upx 0 17upx;

					.usestatus {
						display: flex;

						.isuse {
							color: #FF0000;
							margin-left: 25upx;
						}

						.isuse1 {
							color: #16BF5A;
							margin-left: 25upx;
						}

						.isuse2 {
							color: #888888;
							margin-left: 25upx;
						}
					}
				}
			}
		}
	}
</style>
